<template>
  <div class="player-cover">
    <img src="../../assets/image/stick.png" class="player-cover__stick" :class="stickActive ? 'player-cover__stick--play' : ''">
    <div class="player-cover__bg"></div>
    <van-swipe ref="swipe" class="player-cover__swipe" :show-indicators="false" :duration='duration' :touchable='touchable' @change="onChange">
      <van-swipe-item v-for="(item, index) of swipeList" :key="index">
        <div class="player-cover__wrapper">
          <div class="player-cover__inner" :ref="'swipe-item-' + index">
            <img v-lazy='item.picUrl' class="player-cover__img">
          </div>
        </div>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapGetters('player', ['playList', 'currentIndex', 'playing', 'fullScreen', 'currentSong', 'mode']),
  },
  data() {
    return {
      swipeList: [],
      touchable: true,
      swipeIndex: this.currentIndex,
      stickActive: false,
      duration: 500
    }
  },
  methods: {
    init() {
      this.swipeIndex = this.currentIndex
      this.swipeList = this.playList
      this.duration = 0
      this.$refs.swipe.swipeTo(this.currentIndex)
      setTimeout(() => {
        this.duration = 500
        this.reSetRotate()
      }, 100)
    },
    reSetRotate(type) {
      this.$nextTick(() => {
        this.stickActive = this.playing
        for (let index = 0; index < this.swipeList.length; index++) {
          const swipItem = this.$refs[`swipe-item-${index}`][0]
          if (index === this.currentIndex) {
            if (type === 'pause') {
              this.playing ? swipItem.classList.remove('player-cover--pause') : swipItem.classList.add('player-cover--pause')
            } else {
              swipItem.classList.add('player-cover--rotate')
            }
            continue
          }
          swipItem.classList = ['player-cover__inner']
        }
        this.$forceUpdate()
      })
    },
    onChange(index) {
      this.swipeIndex = index
      this.touchable = false
      this.stickActive = false

      if (this.duration === 0) {
        this.playStart()
        return
      }
      this.setCurrentIndex(index)
      this.$emit('change')
    },
    playStart() {
      this.touchable = true
      this.reSetRotate()
    },
    prve() {
      this.$refs.swipe.prev()
    },
    next() {
      this.$refs.swipe.next()
    },
    ...mapMutations('player', {
      setCurrentIndex: 'SET_CURRENT_INDEX'
    })
  },
  mounted() {
    this.init()
  },
  watch: {
    playList() {
      this.init()
    },
    currentSong(newSong, oldSong) {
      if (!newSong) {
        return
      }
      if (oldSong && newSong.id === oldSong.id) {
        return
      }
      if (this.swipeIndex === this.currentIndex) { // 防止滑动触发
        return
      }
      this.$refs.swipe.swipeTo(this.currentIndex)
    },
    playing() {
      this.reSetRotate('pause')
    }
  }
}
</script>
<style lang="less" scoped>
.player-cover{
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  height: 70%;
  .player-cover__swipe{
    width: 100%;
  }
  .player-cover__bg{
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    background-color: #ffffff2e;
  }
  .player-cover__wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    .player-cover__inner{
      width: 260px;
      height: 260px;
      background-image: url('~@/assets/image/cd.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      transform-origin: center;
      .player-cover__img{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        border-radius: 50%;
        width: 180px;
        height: 180px;
      }
    }
  }
  .player-cover__stick{
    z-index: 1;
    position: absolute;
    width: 110px;
    left: 50%;
    transform-origin: 0 0;
    transition: transform .6s;
  }
  .player-cover__stick--play{
    transform: rotate(20deg);
  }
  .player-cover--rotate{
    transform-origin: center;
    animation: rotate 20s linear infinite;
  }
  .player-cover--pause{
    animation-play-state: paused;
  }
  @keyframes rotate {
    0%{
      transform: rotate(0deg);
    }
    100%{
      transform: rotate(360deg);
    }
  }
}
</style>